<template>
	<view class="idx-a">
    <view class="idx-b idx-c">
      <view>{{ nowTime }}</view>
      <view>
        <i class="iconfont guanli icon-fs"></i>
        <i class="iconfont wangluo icon-fs"></i>
      </view>
    </view>
    <!-- <view class="idx-b idx-s">
      <view><i class="iconfont laba-xianxing icon-fs"></i></view>
      <view class="block">
        <view class="words" ref="words" :style="{animationDuration: words && words.offsetWidth / 150 + 's'}" text="欢迎使用华能供热智慧宝~！可报修，可缴费……如有用热问题，请致电客服">欢迎使用华能供热智慧宝~！可报修，可缴费……如有用热问题，请致电客服</view>
      </view>
    </view> -->
    <view class="idx-t"><i class="iconfont dingwei icon-fs"></i>用热地址：中海春光小区3号楼2单元401</view>
    <view class="idx-b"> 
      <view><i class="iconfont wo icon-fs"></i>用户名称：孙晓明</view>
      <view><i class="iconfont xinxi icon-fs"></i>用户编号：012826</view>
    </view>
    <view class="idx-d">
      <view class="idx-e">
        <view class="idx-e1">
          <view class="idx-f">当前室温：</view>
          <view class="idx-g">
            <text class="idx-h">23.5</text>
            <text class="idx-i">℃</text>
          </view>
          <view class="idx-j">
            <text class="idx-k">湿度</text>
            <text class="idx-l">34%</text>
          </view>
        </view>
        <view class="idx-m">
          <ChangeTemp />
        </view>
      </view>
      <view class="idx-n">
        <view class="idx-o col1">
          <view class="idx-p"><i class="iconfont kefu icon-fs3"></i></view>
          <view class="idx-q">热线呼叫</view>
        </view>
        <view class="idx-o col3">
          <view class="idx-p"><i class="iconfont yuyue icon-fs3"></i></view>
          <view class="idx-q">缴费记录</view>
        </view>
      </view>
      <view class="idx-n">
        <view class="idx-o col2">
          <view class="idx-p"><i class="iconfont jiaofei icon-fs3"></i></view>
          <view class="idx-q">供热交费</view>
        </view>
        <view class="idx-o col4">
          <view class="idx-p"><i class="iconfont gongjijin icon-fs3"></i></view>
          <view class="idx-q">电子发票</view>
        </view>
      </view>
    </view>
    <view class="idx-r">
      <view>天气预报</view>
      <view>华能供热海拉尔分公司<i class="iconfont rexian icon-fs"></i>88996</view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import ChangeTemp from '../../components/change-temp/ChangeTemp'
var timer = 0
const nowTime = ref('')
onMounted(() => {
  timer = setInterval(() => {
    nowTime.value = formateDate()
  }, 1000)
})

onBeforeUnmount(() => {
  // 清除定时器
  clearInterval(timer)
  timer = 0
})

const complement = (value) => {
  return value < 10 ? `0${value}` : value
}

const formateDate = () => {
    const time = new Date()
    const year = time.getFullYear()
    const month = complement(time.getMonth() + 1)
    const day = complement(time.getDate())
    const hour = complement(time.getHours())
    const minute = complement(time.getMinutes())
    const second = complement(time.getSeconds())
    const week = '星期' + '日一二三四五六'.charAt(time.getDay())
    return `${year}年${month}月${day}日 ${hour}:${minute}:${second} ${week}`
}
</script>

<style scoped>
.idx-a {height: calc(100% - 2rem); padding: 1rem; background-color: #0e1166; font-size: 1.4rem; color: #FFF;}
.idx-b {margin-bottom: 1rem; display: flex; display: -webkit-flex; justify-content: space-between;}
.idx-c {font-size: 1rem;}
.idx-d {display: flex; display: -webkit-flex; justify-content: space-between; margin-top: 1rem;}
.idx-e {width: calc(50% - 2rem);}
.idx-e1 {background: linear-gradient(#fe2cdb, #ff0777); border-radius: 10px; padding: 1rem; margin-top: 1rem;}
.idx-f {font-size: 1.5rem;}
.idx-g {text-align: center; padding: 0 0 1rem 0;}
.idx-h {font-size: 4rem;}
.idx-i {font-size: 3rem;}
.idx-j {text-align: center;}
.idx-k {font-size: 2rem; padding-right: 2rem;}
.idx-l {font-size: 2.5rem;}
.idx-m {padding-top: 2rem;}
.idx-n {width: calc(25% - 2rem);}
.idx-o {padding: 1rem; margin-top: 1rem; border-radius: 10px;}
.idx-p {padding: 0.5rem 0; text-align: center;}
.idx-q {text-align: center; padding-bottom: 0.8rem;}
.idx-r {padding-top: 1rem; display: flex; display: -webkit-flex; justify-content: space-between;}
.idx-s {color: #ebe9a5;}
.idx-t {padding-bottom: 1rem;}

.col1 {background: linear-gradient(#aae601, #45bd01);}
.col1:active {background: linear-gradient(#9bce00, #3ba100);}
.col2 {background: linear-gradient(#ffc619, #ff700a);}
.col2:active {background: linear-gradient(#e8b416, #da5c08);}
.col3 {background: linear-gradient(#33faff, #30abfb);}
.col3:active {background: linear-gradient(#2bd7da, #278fd0);}
.col4 {background: linear-gradient(#fa5e77, #ce2634);}
.col4:active {background: linear-gradient(#d55066, #9d1d27);}
</style>
